<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Simple jQuery Slideshow</title>
<script type="text/javascript" src="../../lib/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../lib/jquery/ui/jquery-ui-1.8.17.custom.js"></script>
<script type="text/javascript">
(function(){
    $.fn.slideshow = function(options){
		var _this = $(this);
        var defaults = {
            imgPath : 'images/',   
			number : 4,    
			imgs : [],
            width : 500,
            height : 250,            
            time : 3,    
            mode : 'fadein', 
			modeOpts : {}
        }
        var opts = $.extend(defaults, options);
		var timer;
		var isInited;
		
		function init(){
			if($('#slideshow').length != 0){
				if($('#slideshow_img').length == 0){
					$('#slideshow').append('<div id="slideshow_img"></div>');
					$("#slideshow_img").css('height', opts.height);
					if(opts.imgs.length ==0){
						var pic;
						for(var i=1; i< opts.number; i++){
							pic = '<img src="' + opts.imgPath + 'image'+ i +'.jpg" alt="pic' + i 
								+ '" width="' + opts.width + '" height="' + opts.height + '"/>';
							$("#slideshow_img").append(pic);
						}
						pic = '<img src="' + opts.imgPath + 'image'+ opts.number +'.jpg" alt="pic'+ opts.number 
								+'" width="' + opts.width + '" height="' + opts.height + '" class="active" />';
						$("#slideshow_img").append(pic);
					}
					else{
						var pic;
						for(var i=1; i< opts.imgs.length; i++){
							pic = '<img src="' + opts.imgPath +  opts.imgs[i-1] + '" alt="' + opts.imgs[i-1] 
								+ '" width="' + opts.width + '" height="' + opts.height + '"/>';
							$("#slideshow_img").append(pic);
						}
						pic = '<img src="' + opts.imgPath + opts.imgs[opts.imgs.length-1] + '" alt="'+opts.imgs[opts.imgs.length-1] 
								+ '" width="' + opts.width + '" height="' + opts.height + '" class="active" />';
						$("#slideshow_img").append(pic);
					}
				}
				if($('#slideshow_nav').length == 0){
					$('#slideshow').append('<div id ="slideshow_nav" class="num"></div>');
					var nav;
					for(var i=1; i< opts.number; i++){
						nav = '<a href="#" order="' + i + '">' + i + '</a>';
						$('#slideshow_nav').append(nav);
					}
					nav = '<a href="#" order="' + opts.number + '" class="hover">' + opts.number + '</a>';
					$('#slideshow_nav').append(nav);
					/*$('#slideshow_nav a').click(function(){	
						clearInterval(timer);
						if(this.className != 'hover'){
							var nowpic = $('#slideshow_nav a.hover').index();
							var nextpic = $(this).index();
							var $active = $('#slideshow_img img').eq(nowpic);
							var $activeNav = $('#slideshow_nav a').eq(nowpic);
							var $next = $('#slideshow_img img').eq(nextpic);
							var $nextNav = $('#slideshow_nav a').eq(nextpic);
							changePic($active, $activeNav, $next, $nextNav);
						} 							 
						timer = setInterval( slideSwitch, opts.time * 1000 );
					 });*/
					$('#slideshow_nav a').mouseover(function(){
						clearInterval(timer);
						if(this.className != 'hover'){
							var nowpic = $('#slideshow_nav a.hover').index();
							var nextpic = $(this).index();
							var $active = $('#slideshow_img img').eq(nowpic);
							var $activeNav = $('#slideshow_nav a').eq(nowpic);
							var $next = $('#slideshow_img img').eq(nextpic);
							var $nextNav = $('#slideshow_nav a').eq(nextpic);
							changePic($active, $activeNav, $next, $nextNav);
						} 						 
					 });
					$('#slideshow_nav a').mouseout(function(){
						if(this.className == 'hover'){
							timer = setInterval( slideSwitch, opts.time * 1000 );
						}
					 });
				}
				if (opts.mode === "scale") {
					opts.modeOpts = {
						percent : 0
					};
				} else if (opts.mode === "size") {
					opts.modeOpts = {
						to : { width : 200, height : 60}
					};
				}
				isInited = true;
			}
		}
		
		function slideSwitch() {
			if(!isInited){
				init();
			}
			var	$active = $('#slideshow_img img.active');	
			var $activeNav = $('#slideshow_nav a.hover');
			if ( $active.length == 0 ) {
				$active = $('#slideshow_img img:last');
			}
			if( $activeNav.length == 0 ){
				$activeNav = $('#slideshow_nav a:last');
			}
			var $next = $active.next().length ? $active.next() : $('#slideshow_img img:first');
			var $nextNav = $activeNav.next().length ? $activeNav.next() : $('#slideshow_nav a:first');
			
			changePic($active,$activeNav,$next,$nextNav);
		}

		function changePic($active,$activeNav,$next,$nextNav){
			$active.addClass('last-active');
			$active.effect(opts.mode, opts.modeOpts, 500);
			$next.css({opacity: 0.0})
				.addClass('active')
				.animate({opacity: 1.0}, 500, function() {					
					$active.removeAttr("style").hide().fadeIn();
					$active.removeAttr("style").removeClass('active last-active');					
				});
			$activeNav.removeClass('hover');
			$nextNav.addClass('hover');
		}
		
		timer = setInterval( slideSwitch, opts.time * 1000 );
	}
})(jQuery);
</script>

<style type="text/css">
#slideshow {position:relative;}
#slideshow_img {position:relative;}

.num{position:relative; left:10px; top:-32px; z-index:200;}
.num a{display:inline-block; padding:1px 5px; background:#fff; text-decoration:none; color:#000; border:1px solid #ccc; margin-left:5px;}
.num a:hover{background:#f00; color:#fff; border:1px solid #f00;}
.num a.hover{background:#f00; color:#fff; border:1px solid #f00;}

#slideshow_img img { position:absolute;top:0;left:0;z-index:8;opacity:0.0;}
#slideshow img.active {z-index:10;opacity:1.0;}
#slideshow img.last-active {z-index:9;}
</style>

</head>
<body style="font-family: Arial, Sans-serif, sans;">
<h1>jQuery Slideshow</h1>
<div id="slideshow">
</div>
<div>
	<select name="effects" id="effectTypes">
		<option value="blind">Blind</option>
		<option value="bounce">Bounce</option>
		<option value="clip">Clip</option>
		<option value="drop">Drop</option >
		<option value="explode">Explode</option>
		<option value="fold">Fold</option>
		<option value="fadein" selected="selected">Fadein</option>
		<option value="highlight">Highlight</option>
		<option value="puff">Puff</option>
		<option value="pulsate">Pulsate</option>
		<option value="scale">Scale</option>
		<option value="shake">Shake</option>
		<option value="size">Size</option>
		<option value="slide">Slide</option>
	</select> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div>
<script type="text/javascript">
$("#button").click(function(event) {
	var selectedEffect = $("#effectTypes").val();
	$('document').slideshow({
		imgPath : '../images/', 
		number : 4,  
		imgs : ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'],
		width : 600,
		height : 350,  
		time : 3,
		mode : selectedEffect 
	});
	return false;
});
</script>
</body>
</html>
